<template>
  <div class="login">
    <div class="second_logo"
         style="width: 570px;line-height: 42px;height: 42px;margin-left: 70px;padding-top: 70px">
      <div style="color: #f6ca9d;line-height: 42px;height: 42px">
        <img src="../assets/images/shuhua_new.png" style="width:123px;height: 42px;">
      </div>
      <div class="divSplit"></div>
      <div
        style="color: #2BC9CF;display: inline-block;line-height: 42px;float: right;float: right;  margin-top: 1px;  margin-right: 11px;font-size: 26px">
        {{ $t("loginL.sysNameLogo") }}
      </div>
    </div>

    <!-- width: 342px;height: 292px; -->
    <Row :style="mainFormStyle">
      <Col span="12" style="text-align: center">
        <!-- 动态计算margin-left -->
        <img src="../assets/images/login/sub_logo.png" style="height: 422px;">
      </Col>
      <Col span="12">
        <div class="login-form">
          <div style="font-size:30px;padding:10px;color: #ffffff">{{$t('common.resetPassword')}} </div>
          <Form ref="resetPwdForm" :model="resetPwdFrom" :rules="resetPwdFromRules" style="margin: 0px 40px"  v-if="$i18n.locale === 'zh-CN'">
            <FormItem prop="phone">
              <Input prefix="md-phone-portrait" :placeholder="$t('common.phonePlaceTips')" v-model="resetPwdFrom.phone" maxlength="11"/>
            </FormItem>
            <FormItem prop="captcha">
              <Input prefix="md-code" :placeholder="$t('loginL.enterCode')" v-model="resetPwdFrom.captcha" style="width: 250px"/>
              <div class="forget_pwd" @click="getCaptcha"> {{this.$t('loginL.getCode')}}</div>
            </FormItem>
            <FormItem prop="password">
              <Input type="password" prefix="md-lock" :placeholder="$t('common.passwordPlaceTips')" v-model="resetPwdFrom.password"/>
            </FormItem>
            <FormItem prop="confirmPwd">
              <Input type="password" prefix="md-lock" :placeholder=" $t('loginL.pwdConfirmPlaceTips')" v-model="resetPwdFrom.confirmPwd"/>
            </FormItem>
            <FormItem>
              <Button @click="reset" type="primary" long :loading="loginLoading"
                      style="letter-spacing:5px;margin-bottom:20px">
                <span v-if="!loginLoading">{{$t('reset')}}</span>
                <span v-else>{{$t('loginL.reseting')}}....</span>
              </Button>
            </FormItem>
          </Form>
          <Form ref="resetPwdFormE" :model="resetPwdFromE" :rules="resetPwdFromRulesE" style="margin: 0px 40px" v-else>
            <FormItem prop="mail">
              <Input prefix="md-phone-portrait" :placeholder="$t('common.emailPlaceTips')" v-model="resetPwdFromE.mail" />
            </FormItem>
            <FormItem prop="captcha">
              <Input prefix="md-code" :placeholder="$t('loginL.enterCode')" v-model="resetPwdFromE.captcha" style="width: 250px"/>
              <div class="forget_pwd" @click="getCaptchaE"> {{this.$t('loginL.getCode')}}</div>
            </FormItem>
            <FormItem prop="password">
              <Input type="password" prefix="md-lock" :placeholder="$t('common.passwordPlaceTips')" v-model="resetPwdFromE.password"/>
            </FormItem>
            <FormItem prop="confirmPwd">
              <Input type="password" prefix="md-lock" :placeholder=" $t('loginL.pwdConfirmPlaceTips')" v-model="resetPwdFromE.confirmPwd"/>
            </FormItem>
            <FormItem>
              <Button @click="resetE" type="primary" long :loading="loginLoading"
                      style="letter-spacing:5px;margin-bottom:20px">
                <span v-if="!loginLoading">{{$t('reset')}}</span>
                <span v-else>{{$t('loginL.reseting')}}....</span>
              </Button>
            </FormItem>
          </Form>
        </div>
      </Col>

    </Row>

  </div>
</template>

<script>
  import ResetPwdApi from '@/api/resetPwdApi'

  export default {
    data() {
      const validateChangePassCheck = (rule, value, callback) => {
        if (value !== this.resetPwdFrom.password) {
          console.log("confirm password:" + value)
          console.log("pwd:" + this.resetPwdFrom.password)
          callback(new Error(this.$t('common.pwd2Diff')));
        } else {
          callback();
        }
      };
      const validateChangePassCheckE = (rule, value, callback) => {
        if (value !== this.resetPwdFromE.password) {
          console.log("confirm password:" + value)
          console.log("pwd:" + this.resetPwdFromE.password)
          callback(new Error(this.$t('common.pwd2Diff')));
        } else {
          callback();
        }
      };
      return {
        mainFormStyle: {
          marginTop: '0px'
        },
        loginLoading: false,
        resetPwdFrom: {
          phone: '',
          password: '',
          captcha: '',
          confirmPwd: ''
        },
         resetPwdFromE: {
          mail: '',
          password: '',
          captcha: '',
          confirmPwd: ''
        },
        resetPwdFromRules: {
          phone: [
            {required: true, message: this.$t('common.phoneMustTips'), trigger: 'blur'},
            {type: 'string', pattern: '^[1][3-9][0-9]{9}$', message: this.$t('common.phoneFormate'), trigger: 'blur'}
          ],
          password: [
            {required: true, message:  this.$t('common.passwordMustTips'), trigger: 'blur'},
          ],
          confirmPwd: [
            {required: true, message: this.$t('common.confirmPasswordMustTips'), trigger: 'blur'},
            {validator: validateChangePassCheck, trigger: 'blur'}
          ],
          captcha: [
            {required: true, message: this.$t('loginL.codeMust'), trigger: 'blur'},
          ]
        },
        resetPwdFromRulesE: {
          mail: [
            {required: true, message: this.$t('common.emailMust'), trigger: 'blur'},
            {
            type: "string",
            pattern: "^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$",
            message: this.$t("common.emailFormate"),
            trigger: "blur",
          },
          ],
          password: [
            {required: true, message:  this.$t('common.passwordMustTips'), trigger: 'blur'},
          ],
          confirmPwd: [
            {required: true, message: this.$t('common.confirmPasswordMustTips'), trigger: 'blur'},
            {validator: validateChangePassCheckE, trigger: 'blur'}
          ],
          captcha: [
            {required: true, message: this.$t('loginL.codeMust'), trigger: 'blur'},
          ]
        },
      }
    },
    methods: {
      getCaptcha() {
        //判断手机号是否填写
        const phoneReg = /^[1][3-9][0-9]{9}$/
        if (!(phoneReg.test(this.resetPwdFrom.phone))) {
          this.$Message.error(this.$t('common.phoneFormate'))
          return
        }
        this.showLoading(this.$t('loginL.codeSend'))
        //请求发送验证码
        ResetPwdApi.getResetPwdCaptcha(this.resetPwdFrom.phone).then(response => {
          this.$Spin.hide()
          this.$Message.success(this.$t('loginL.codeSuc'));
        }, error => {
          this.$Spin.hide()
          this.$Message.error(error.response.data.msg);
        })


      },
      getCaptchaE() {
        //判断手机号是否填写
        const mailReg = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
        if (!(mailReg.test(this.resetPwdFromE.mail))) {
          this.$Message.error(this.$t('common.emailFormate'))
          return
        }
        this.showLoading(this.$t('loginL.codeSend'))
        //请求发送验证码
        ResetPwdApi.getResetPwdCaptchaEmail(this.resetPwdFromE.mail).then(response => {
          this.$Spin.hide()
          this.$Message.success(this.$t('loginL.codeSuc'));
        }, error => {
          this.$Spin.hide()
          this.$Message.error(error.response.data.msg);
        })


      },
      resetE() {
        this.$refs.resetPwdFormE.validate((valid) => {
          if (valid) {
            this.showLoading(this.$t('loginL.opting'))
            ResetPwdApi.resetPwdEmail(this.resetPwdFromE.mail, this.resetPwdFromE.password, this.resetPwdFromE.captcha).then(response => {
              this.$Spin.hide()
              this.$refs.resetPwdFormE.resetFields()
              this.$Message.success(this.$t('common.pwdSuc'));
              //重置表单
            }, error => {
              this.$Spin.hide()
              this.$Message.error(error.response.data.msg);
            })
          }
        })
      },
      reset() {
        this.$refs.resetPwdForm.validate((valid) => {
          if (valid) {
            this.showLoading(this.$t('loginL.opting'))
            ResetPwdApi.resetPwd(this.resetPwdFrom.phone, this.resetPwdFrom.password, this.resetPwdFrom.captcha).then(response => {
              this.$Spin.hide()
              this.$refs.resetPwdForm.resetFields()
              this.$Message.success(this.$t('common.pwdSuc'));
              //重置表单
            }, error => {
              this.$Spin.hide()
              this.$Message.error(error.response.data.msg);
            })
          }
        })
      },
      showLoading(content) {
        this.$Spin.show({
          render: (h) => {
            return h('div', [
              h('Icon', {
                'class': 'spin-icon-load',
                props: {
                  type: 'ios-loading',
                  size: 18
                }
              }),
              h('div', content)
            ])
          }
        });
      }
    },
    mounted() {
      //动态调整高度
      var clientH = document.documentElement.clientHeight || document.body.clientHeight;
      //console.log("总高度：" + clientH)
      clientH = clientH - 422 - 110
      //console.log("剩余高度：" + clientH)
      if (clientH < 0) {
        this.mainFormStyle.marginTop = '0px'
      } else {
        clientH = parseInt(clientH / 3)
        //前面元素抵消掉的距离
        clientH = clientH + 33
        console.log("margin:" + clientH)
        this.mainFormStyle.marginTop = clientH + "px"

      }
    }
  }
</script>
<style lang="less">
  .login {
    width: 100%;
    height: 100%;
    background-image: url('../assets/images/login/bg.png');
    background-size: cover;
    background-position: center;
    position: relative;

    .login-form {
      width: 438px;
      text-align: center;
      margin: auto;
      background: url('../assets/images/login/form_bg.png') no-repeat;
      background-size: 100% 100%;
    }

    .ivu-card-head span {
      color: #ffffff;
    }

    .ivu-input {
      line-height: 50px;
      height: 50px;
      font-size: 18px;
      background: transparent;
      border: 1px solid #20B2B7;
      color: #ffffff;
    }

    .ivu-input-prefix i, .ivu-input-suffix i {
      font-size: 28px;
      color: #D3D3D4;
      margin-top: 9px;
      margin-left: 8px;
    }

    .ivu-input-with-prefix {
      padding-left: 45px;
    }

    .ivu-btn {
      font-size: 24px;
      line-height: 50px;
      height: 50px;
    }

    .ivu-checkbox-inner {
      border: 1px solid #21B7BA;
      background-color: transparent;
    }

    .ivu-btn-primary {
      color: #fff;
      background-color: #21B7BA;
      border-color: #21B7BA;
    }

    .forget_pwd {
      float: right;
      color: #2BC9CF;
      cursor: pointer;
      font-size: 18px;
      margin-top: 10px;
    }

    .forget_pwd:hover {
      color: #dcdcdc;

    }

    .second_logo {
      div {
        height: 33px;
        display: inline-block;
        font-size: 22px;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
        line-height: 46px;
      }

      .divSplit {
        width: 1px;
        height: 20px;
        background: #2BC9CF;
        margin-left: 14px;
        margin-right: 14px;
        display: inline-block;
        margin-bottom: 10px;
      }
    }

    .ivu-form-item-content {
      text-align: left;
    }


  }

  .spin-icon-load {
    animation: ani-demo-spin 1s linear infinite;
  }
</style>
